<template>
    <div>
      <div class="bar">
          <div class="demonstration">调和</div>
          <div class="demonstration">高</div>
          <div class="block">
              <el-slider v-model="value1"></el-slider>
          </div>
          <div class="demonstration">低</div>
      </div>
      <div class="bar">
          <div class="demonstration">对比</div>
          <div class="demonstration">高</div>
          <div class="block">
              <el-slider v-model="value2"></el-slider>
          </div>
          <div class="demonstration">低</div>
      </div>
  
    </div>
  </template>
    
    <script>
  export default {
    data() {
      return {
        value1: 50,
        value2: 50,
      };
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      },
    },
  };
  </script>
  
  <style scoped>
  .block{
      /* flex: 3.5; */
      width: 150px;
      margin-left: 10px;
      /* display: flex; */
  }
  .demonstration{
      font-size: 15px;
      /* text-align: center; */
      margin: auto;
  }
  .bar{
      display: flex;
      width: 260px;
  }
  </style>